<!-- <template>
	<div class="book">
		<div class="tabs">
			<p class="p1">修改</p>
			<div class="box">
				<p>
					<label>商品名称：</label>
					<input type="text" v-model.lazy.trim="name"/>
				</p>
				<p>
					<label>商品序号：</label>
					<input type="text" v-model.lazy.trim="sn"/>
				</p>
				<p>
					<label>商品价格：</label>
					<input type="text" v-model.lazy.trim="price"/>
				</p>
				<p>
					<label>商品厂商：</label>
					<input type="text" v-model.lazy.trim="publisher"/>
				</p>
				<p>
					<label>商品出处：</label>
					<input type="text" v-model.lazy.trim="author"/>
				</p>
				<p>
					<label>出厂时间：</label>
					<input type="date" v-model="tpublish"/>
				</p>
				<p>
					<label>商品类型：</label>
					<select v-model="type">
						<option value="1">Java</option>
						<option value="2">SpringBoot</option>
						<option value="3">容器</option>
						<option value="4">IT技术基础</option>
						<option value="5">Vue脚手架</option>
						<option value="6">微信小程序</option>
					</select>
				</p>
				<p>
					<label>商品图片：</label>
					<input type="file" ref='pic'/>
				</p>
				<button @click="goback()">返回</button>
				<button @click="add()">提交</button>
			</div>	
		</div>
	</div>
</template>

<script>
	export default{
		name:'BookAdd',
		data(){
			return{
				name:'',
				sn:'',
				author:'',
				publisher:'',
				tpublish:'',
				pic:'',
				price:0,
				type:1
			}
		},
		methods:{
			//返回按钮
			goback(){
				this.$router.push('/adm/adm2')
			},
			// 添加按钮
			add(){
				let fs = this.$refs.pic.files	//获取的是图片完整数据
				if(fs.length >0 && fs[0] !='' && this.name!='' &&this.type!='' && this.sn!='' &&this.price!='' &&this.author!=''&&this.publisher!='' &&this.tpublish!=''){
					//创建一个空的表单对象数据
					let fd = new FormData()
					//将需要打包的数据，append方式提交给对象
					fd.append('name',this.name)			//商品名称
					fd.append('sn',this.sn)				//商品序号
					fd.append('price',this.price)		//商品价格
					fd.append('publisher',this.publisher)//商品厂商
					fd.append('author',this.author)		//商品出处
					fd.append('tpublish',this.tpublish)	//出厂时间
					fd.append('type',this.type)			//商品类型
					fd.append('pic',fs[0])				
					
				   this.axios.post('/api/adm/book/addBook',fd,{
					   header:{'Content-Type' : 'multipart/form-data'}
				   }).then((res)=>{
					   if(res.data.code === 200){
						   //请求成功后，返回 查询页
						   this.$router.push('/adm/adm2')
					   }else{
						   alert(res.data.msg)	//msg失败之后的返回信息
					   }
				   }).catch((error)=>{
					   console.log(error)
				   })
				}
			}
		}
	}
</script>

<style scoped>
.box button{
	width: 50px;
	left: 400px;
	position: relative;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 15px;
	color: white;
	background: linear-gradient(to right,#00bfff,#00bfff);
	border: none;
	line-height: 25px;
	border-radius: 5px;
}
.box button:last-child{
	margin-left: 30px;
}
.tabs .p1{
	font-size: 30px;
	color:#00bfff ;
	font-weight: bold;
	padding-bottom: 20px;
	padding-right: 25px;
}
.box label{
	font-size: 20px;
	color: #00bfff;
	line-height: 40px;
}
.box input[type='text'],.box input[type="date"]{
	width: 20%;
	line-height: 25px;
	border: none;
	border: 1.5px solid #00bfff;
	border-radius: 5px;
	text-indent: 0.5em;
}
.box select{
	border: none;
	border: 1.5px solid #00bfff;
	border-radius: 5px;
	width: 5%;
	height: 25px;
}
</style> -->


<template>
	<div class="adm2">
		<div class="tabs">
			<!-- 表格 -->
			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">书本修改</div>
					</el-header>
					<div class="book-admin">
						<el-form :model="formData" class="demo-form-inline" label-position="left">
							<el-form-item label="商品名称">
								<el-input v-model.lazy.trim="formData.name" placeholder="请输入商品名称" />
							</el-form-item>
							<el-form-item label="商品序号">
								<el-input v-model.lazy.trim="formData.sn" placeholder="请输入商品序号" />
							</el-form-item>
							<el-form-item label="商品价格">
								<el-input v-model.lazy.trim="formData.price" type="number" placeholder="请输入商品价格" />
							</el-form-item>
							<el-form-item label="商品厂商">
								<el-input v-model.lazy.trim="formData.publisher" placeholder="请输入商品厂商" />
							</el-form-item>
							<el-form-item label="商品出处">
								<el-input v-model.lazy.trim="formData.author" placeholder="请输入商品出处" />
							</el-form-item>
							<el-form-item label="出厂时间">
								<el-input v-model.lazy.trim="formData.tpublish" type="date" placeholder="请输入商品出厂时间" disabled />
							</el-form-item>
							<div class="bookform-inline">
								<el-form-item label="商品类型">
									<el-select v-model="formData.type" placeholder="请选择商品类型" disabled>
										<!-- <el-option v-for="item in typelist" :label="item.type" :value="item.id" :key="item.value" /> -->
										<el-option value="1">后端</el-option>
										<el-option value="5">前端</el-option>
										<el-option value="40">数据库</el-option>
										<el-option value="43">运维</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="商品图片">
									<div style="margin-top: 15px; display: flex" class="image">
										<!-- 图片显示的区域 -->
										<!-- <el-image :src="`${$Imgurl}/api/public/showImg/${formData.picture}`"></el-image> -->
										<div style="display: flex">
											<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
												:before-upload="beforeUpload" :file-list="fileList" :on-change="handleChange"
												action="uploadAction" list-type="picture" accept=".jpg, .jpeg, .png, .gif">
												<el-button type="primary">上传图片</el-button>
											</el-upload>
										</div>
									</div>
								</el-form-item>
							</div>
						</el-form>
						<el-button type="success" class="regbtn" @click="updateEdit">修改</el-button>
					</div>
				</el-main>
			</el-container>

		</div>

	</div>
</template>

<script>
import { showLoading } from "@/utils/loading";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			showLoading: showLoading,
			fileList: [],
			formData: {
				name: '',
				sn: '',
				author: '',
				publisher: '',
				tpublish: '',
				pic: '',
				price: 0,
				type: 1
			}
		}
	},

	created(){
		this.formData.name = this.$route.query.name;
		this.formData.sn = this.$route.query.sn;
		this.formData.author = this.$route.query.author;
		this.formData.publisher = this.$route.query.publisher;
		// this.formData.tpublish = new Date(this.$route.query.tpublish).getTime();

		// 格式化 yy-MM-dd".
		let date = new Date(this.$route.query.tpublish);
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		this.formData.tpublish = `${year}-${month}-${day}`;

		this.formData.pic = this.$route.query.pic;
		this.formData.price = this.$route.query.price;
		this.formData.type = 1;
	
	},

	methods: {
		//上传器的方法
		beforeUpload (file) {
			console.log("beforeUplaod");
		},
		handleChange (file, fileList) {
			this.fileList = fileList;
		},

		updateEdit () {			
			// 判断是否为空
			if (this.formData.name == '' || this.formData.sn == '' || this.formData.author == '' ) {
				this.$message({
					message: '请填写完整信息',
					type: 'warning'
				});
				return;
			}


			// 判断是否上传图片
			if (this.fileList.length == 0) {
				this.$message({
					message: '请上传图片',
					type: 'warning'
				});
				return;
			}

			// 判断是否选择类型
			if (this.formData.type == '') {
				this.$message({
					message: '请选择类型',
					type: 'warning'
				});
				return;
			}

			let fd = new FormData()
			fd.append('name', this.formData.name)
			fd.append('sn', this.formData.sn)
			fd.append('author', this.formData.author)
			fd.append('publisher', this.formData.publisher)
			fd.append('tpublish', this.formData.tpublish)
			fd.append('price', this.formData.price)
			fd.append('type', this.formData.type)
			fd.append('pic', this.fileList[0].raw)


			const result = this.axios.post(`/api/adm/book/addBook`,fd,{
				header:{'Content-Type' : 'multipart/form-data'}
			})
			
			
			// 跳回 /adm2
			this.$router.push('/adm2')
		}
	},
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: -20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}

.book-admin {
	margin-top: 20px;
	border: 1px solid gainsboro;
}

.el-form {
	width: 90%;
	margin: 0 auto;
	margin-top: 10px;
}

.regbtn {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 300px;
	height: 40px;

}
</style>


